<template>
  <footer>
    <ul>
      <router-link custom v-slot="{ isActive, navigate }" v-for="item in paths" :key="item.path" :to="item.path">
        <li @click="navigate(item.path)" :class="isActive ? 'gaoliang' : ''">
          <van-icon :name="item.icon" />
          <span> {{ item.tip }}</span>
        </li>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      paths: [
        { path: '/home', tip: '首页', icon: 'wap-home-o' },
        { path: '/kind', tip: '分类', icon: 'list-switch' },
        { path: '/cart', tip: '购物车', icon: 'cart-o' },
        { path: '/my', tip: '我的', icon: 'manager-o' },
      ]
    }
  }
}
</script>

<style lang="less" scoped>
footer {
  height: 50px;
  box-shadow: 1px 1px 10px black;

  ul {
    display: flex;
    justify-content: space-between;
    height: 100%;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }
}

.gaoliang {
  color: red;
}
</style>